import { Button, message } from "antd";
import { pageEmployee, delEmployee, getPost } from "@/api/flandre-ui/request";
import { BasicTable, useTable, BasicColumn, TableAction } from "@/components/Table";
import DetailDrawer_AddUpdate from "./components/DrawerAddUpdate";
import { useEffect, useState } from "react";
import { useDrawer } from "@/components/Drawer";
import "./index.less";
import { useTranslation } from "react-i18next";
import { IconEnum } from "@/enums/appEnum";

export default function Index() {
	const { t } = useTranslation();
	const en_vi = "HRMS.employeeManagement";
	let [getTitle, setGetTitle] = useState("");
	const [drawer_add_update, { openDrawer: openDrawerAddUpdate }] = useDrawer();
	const [postList, setPostList] = useState([]);
	const columns: BasicColumn[] = [
		// {
		// 	title: t("felix_ui.staff_id"),
		// 	dataIndex: "pkId",
		// 	width: 100
		// },
		{
			title: t(`${en_vi}.staffNo`),
			dataIndex: "pkId",
			width: 150
		},
		{
			title: t(`HRMS.leaveApproval.staffName`),
			dataIndex: "staffName",
			width: 200
		},
		{
			title: t("kevin_ui.gender"),
			dataIndex: "staffSex",
			width: 100,
			render: text => (text == "0" ? "Male" : "Female")
		},
		{
			title: t("kevin_ui.age"),
			dataIndex: "age",
			width: 100,
			render: text => (text == "0" ? "Male" : "Female")
		},
		// {
		// 	title: t(`${en_vi}.role`),
		// 	dataIndex: "jobpozId",
		// 	width: 150
		// },
		{
			title: t(`${en_vi}.educationalBackground`),
			dataIndex: "eduLevel",
			width: 150,
			render: (number: any) => {
				switch (number) {
					case "1":
						return t(`${en_vi}.highSchool`);
					case "2":
						return t(`${en_vi}.juniorCollege`);
					case "3":
						return t(`${en_vi}.bachelor`);
					case "4":
						return t(`${en_vi}.master`);
					case "5":
						return t(`${en_vi}.doctor`);
					default:
						return "";
				}
			}
		},
		{
			title: t(`${en_vi}.industryExperience`),
			dataIndex: "induExpc",
			width: 200
		},
		{
			title: t(`${en_vi}.jobPositionId`),
			dataIndex: "jobpozId",
			width: 150,
			render: (value: any) => {
				return postList.find((item: any) => item.jobpozId == value)?.definitionEn;
			}
		},
		{
			title: t(`${en_vi}.birthday`),
			dataIndex: "birthday",
			width: 150,
			render: (value: any) => {
				console.log(value);
				return value;
			}
		},
		{
			title: t(`${en_vi}.mobilePhone`),
			dataIndex: "phoneNumb",
			width: 150
		},
		{
			title: t(`${en_vi}.email`),
			dataIndex: "emailAddr",
			width: 200
		},
		{
			title: t("felix_ui.action"),
			key: "actions",
			fixed: "right",
			width: 220,
			render: (_, record) => (
				<TableAction
					actions={[
						{
							icon: IconEnum.EDIT,
							label: t("felix_ui.edit"),
							onClick: handleEdit.bind(record)
						},
						{
							icon: IconEnum.DELETE,
							label: t("felix_ui.delete"),
							popConfirm: {
								title: t("common.deleteMessage"),
								placement: "left",
								confirm: handleDelete.bind(null, record)
							}
						}
					]}
				></TableAction>
			)
		}
	];

	const [patServicesTable, { reload }] = useTable({
		api: pageEmployee,
		columns,
		showTableSetting: false,
		showIndexColumn: false
	});

	// Edit
	const handleEdit = (record: Recordable) => {
		setGetTitle("Edit Employee");
		openDrawerAddUpdate(true, { record });
	};

	// Add
	const handleAdd = () => {
		setGetTitle("Add Employee");
		openDrawerAddUpdate(true, {});
	};

	// Delete
	const handleDelete = async (id: any) => {
		try {
			await delEmployee(id);
			message.success(t("viewComponents.patientInformation.deleteSuccessfully"));
			reload();
		} catch (error) {
			t("viewComponents.patientInformation.deleteFailed");
		}
	};
	const getPostFn = async () => {
		const res = await getPost();
		setPostList(res.list);
	};
	useEffect(() => {
		getPostFn();
	}, []);
	return (
		<div className="pageStaffs">
			<div>
				<div className="box1">
					<h1 className="title">{t(`${en_vi}.employee`)}</h1>
					<Button type="primary" onClick={handleAdd}>
						+ {t(`${en_vi}.addEmployee`)}
					</Button>
				</div>
				<BasicTable register={patServicesTable}></BasicTable>
			</div>
			<DetailDrawer_AddUpdate getTitle={getTitle} reload={reload} register={drawer_add_update}></DetailDrawer_AddUpdate>
		</div>
	);
}
